{% extends 'index.html' %}
{% load static %}
{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <script type="text/javascript" src="{% static "js/echarts/ecStat.js" %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'fishbone/html2canvas.js' %}"></script>
    <script src="{% static 'fishbone/fishBone2.js' %}"></script>
    <link rel="stylesheet" href="{% static 'fishbone/fishBone2.css' %}">
    <link href="{% static 'js/lib/layui/css/layui.css' %}" rel="stylesheet">
    <style>
        {#    修改tab切换页选中的颜色#}
        .nav-tabs.nav > li > a:hover, .nav-tabs.nav > li > a:focus {
            border-bottom: 1px solid #042c70;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border-bottom: 1px solid #042c70;
        }
    </style>
{% endblock %}
{% block title %}
    <span class="navbar-page-title">军事需求图谱分析 - 分析助手</span>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        {#    设置关系节点文件上传按钮#}
        <input id="choose_file" type="file" multiple="multiple"
               style="height: 0;width: 0;z-index: -1;" name="choosed_file"
               onChange="return process_file(this)">
        <input type="text" name="path" readonly hidden="hidden">
        <p style="display: none" id="file_name">&nbsp;&nbsp;&nbsp;&nbsp;</p>
        {#        文件上传按钮结束#}

                {#    设置关系节点文件上传按钮#}
        <input id="choose_edge" type="file" multiple="multiple"
               style="height: 0;width: 0;z-index: -1;" name="choosed_file"
               onChange="return edge_file(this)">
        <input type="text" name="path" readonly hidden="hidden">
        <p style="display: none" id="edge_name">&nbsp;&nbsp;&nbsp;&nbsp;</p>
        {#        文件上传按钮结束#}


        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#entity_node" id="entity_node-tab" role="tab" data-toggle="tab">实体节点管理</a>
                            </li>
                            <li><a href="#entity_edge" role="tab" id="entity_edge-tab" data-toggle="tab">实体关系管理</a></li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="entity_node">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <input type="text" id="entity_node_text" placeholder="请输入查询节点名称"
                                               class="form-control">
                                    </div>
                                    <div class="col-xs-2">
                                        <input type="button" onclick="search()" id="entity_node_button"
                                               class="my-btn" value="查询">
                                    </div>
                                </div>

                                <div class="table-responsive">

                                    <table id="nodes_table" lay-filter="nodes_table"></table>
                                </div>


                            </div>
                            <div class="tab-pane fade" id="entity_edge">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <input type="text" id="edge_text" placeholder="请输入查询节点" class="form-control">
                                    </div>
                                    <div class="col-xs-2">
                                        <input type="button" onclick="edge_search()" id="edge_button"
                                               class="my-btn" value="查询">
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table id="edge_tab" lay-filter="edge_tab"></table>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    {#   TODO  新增本地节点#}
    <script type="text/javascript" src="{% static 'js/lib/layui/layui.all.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
    <script type="text/html" id="barDemo">
        <a class="my-small-a-btn" lay-event="edit">编辑</a>
        <a class="my-small-a-btn layui-btn-danger" lay-event="delete">删除</a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm my-btn" style="background-color: #0A318A;" lay-event="create">新增
            </button>
            <button class="layui-btn layui-btn-sm my-btn" style="background-color: #0A318A;" lay-event="import">导入文件
            </button>
        </div>
    </script>
    <script>
        {#// 固定左侧菜单栏#}
        {#document.getElementById("zstpfwjk").style.display = 'block';#}
        {#document.getElementById("zstpstgxgl").style.backgroundColor = 'rgba(30,21,21,0.44)';#}


        layui.use(['table', 'upload'], function () {
            var checkbox_set = new Set();

            var table = layui.table;
            var upload = layui.upload;

            // todo 表格渲染
            table.render({

                parseData: function (res) {
                    for (var i in res.data) {
                        if (checkbox_set.has(res.data[i].id)) {
                            //如果set集合中有的话，给rows添加check属性选中
                            res.data[i]["LAY_CHECKED"] = true;
                        }
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    }
                },
                request: {
                    pageName: 'page' // 页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                },


                elem: '#nodes_table',
                url: "{% url 'nodes_load' %}"
                //,width: 900
                //,height: 274
                , toolbar: '#toolbarDemo'
                , defaultToolbar: []
                , cols: [[ //标题栏
                    {#{type: 'checkbox', width: '5%'}, #}
                    {type: 'numbers', title: '序号', width: '5%', align: 'center'}
                    , {field: 'node_name', title: '节点名称', width: '25%', align: 'center'}
                    , {field: 'node_label', title: '节点标签', width: '15%', align: 'center'}
                    , {field: 'node_attribute', title: '节点属性', width: '35%', align: 'center'}
                    , {title: '操作', toolbar: '#barDemo', width: '20%', align: 'center'}
                ]]
                , id: 'nodes_table'
                , skin: 'row' //表格风格
                , even: true
                //,size: 'lg' //尺寸
                , page: true //是否显示分页
                , limits: [8, 20, 50]
                , limit: 8 //每页默认显示的数量
                //,loading: false //请求数据时，是否显示loading
            });


            // TODO 编辑与删除
            table.on('tool(nodes_table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    xadmin.open('编辑', "{% url 'node_edit' %}?id=" + data.id + "&node_name=" + data.node_name + "&node_label=" + data.node_label + "&node_attribute=" + data.node_attribute, 600, 400);

                } else if (obj.event === 'delete') {
                    node_del(obj, data.node_name);

                }
            });


            table.on('checkbox(nodes_table)',
                function (obj) {
                    var table_checkbox_all = table.cache.nodes_table;
                    if (obj.checked == true) {
                        if (obj.type == 'one') {
                            checkbox_set.add(obj.data.id)
                        }
                        if (obj.type == 'all') {
                            for (i = 0; i < table_checkbox_all.length; i++) {
                                checkbox_set.add(table_checkbox_all[i].id);
                            }
                        }
                    } else {
                        if (obj.type == 'one') {
                            checkbox_set.delete(obj.data.id)
                        }
                        if (obj.type == 'all') {
                            for (i = 0; i < table_checkbox_all.length; i++) {
                                checkbox_set.delete(table_checkbox_all[i].id);
                            }
                        }
                    }
                });

            table.on('toolbar(nodes_table)',
                function (obj) {
                    if (obj.event === 'create') {
                        xadmin.open('添加本体', '{% url 'node_create' %}', 600, 400)
                    } else if (obj.event === 'import') {
                        document.getElementById('choose_file').click()
                    }
                });
        });


        // 设置文件上传标志位
        function process_file(obj) {
            console.log('触发文件上传')
            $('#file_name').html($('#choose_file').val().split('\\').slice(-1))

            var formdata = new FormData();
            var file_obj = $('[type=file]')[0].files[0];
            formdata.append("file", file_obj);


            $.ajax({
                url: '{% url 'up_node_file' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    console.log('success', data);
                    window.location.reload();
                },
                error: function (response) {
                    console.log('err', response);
                }
            });
        }


        //todo 查詢
        function search() {
            //执行重载
            layui.use(['table'], function () {
                var table = layui.table;
                // todo 表格渲染
                var entity_node_text = $("#entity_node_text").val();
                table.reload('nodes_table', {

                    where: { //设定异步数据接口的额外参数，任意设
                        entity_node_text: entity_node_text
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            })
        }

        {#TODO 删除方法#}

        function node_del(obj, name) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $.getJSON('{% url 'node_delete' %}', {
                    name: name
                }, function (data) {
                    if (data.status == 1) {
                        location.reload();
                        layer.msg(data.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(data.msg, {icon: 1, time: 1000})
                    }

                })

            });
        }

    </script>

    <script>

        layui.use(['table', 'upload'], function () {
            var checkbox_set = new Set();
            var table = layui.table;
            var upload = layui.upload;
            // todo 表格渲染
            table.render({
                parseData: function (res) {
                    for (var i in res.data) {
                        if (checkbox_set.has(res.data[i].id)) {
                            //如果set集合中有的话，给rows添加check属性选中
                            res.data[i]["LAY_CHECKED"] = true;
                        }
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    }
                },
                elem: '#edge_tab',
                url: "{% url 'edge_load' %}"
                //,width: 900
                //,height: 274
                , toolbar: '#toolbarDemo'
                , defaultToolbar: []
                , cols: [[ //标题栏
                    {#{type: 'checkbox', width: '5%'} ,#}
                    {type: 'numbers', title: '序号', width: '5%', align: 'center'}
                    , {field: 'edge_type', title: '关系类型', width: '15%', align: 'center'}
                    , {field: 'start_node', title: '起始节点', width: '20%', align: 'center'}
                    , {field: 'end_node', title: '终止节点', width: '20%', align: 'center'}
                    , {field: 'attribute', title: '属性', width: '25%', align: 'center'}
                    , {title: '操作', toolbar: '#barDemo', width: '15%', align: 'center'}
                ]]
                , id: 'edge_tab'
                , skin: 'row' //表格风格
                , even: true
                //,size: 'lg' //尺寸
                , page: true //是否显示分页
                , limits: [8, 20, 50]
                , limit: 8 //每页默认显示的数量
                //,loading: false //请求数据时，是否显示loading
            });

            // TODO 编辑与删除
            table.on('tool(edge_tab)', function (obj) {
                var data = obj.data;
                console.log(data)
                if (obj.event === 'edit') {
                    xadmin.open('编辑', "{% url 'edge_edit' %}?id=" + data.id + "&edge_type=" + data.edge_type + "&start_node=" + data.start_node + "&end_node=" + data.end_node + "&attribute=" + data.attribute, 600, 500);
                    reload()
                } else if (obj.event === 'delete') {
                    edge_del(obj, data.edge_type, data.start_node, data.end_node);
                }
            });


            table.on('checkbox(edge_tab)',
                function (obj) {
                    var table_checkbox_all = table.cache.edge_tab;
                    if (obj.checked == true) {
                        if (obj.type == 'one') {
                            checkbox_set.add(obj.data.id)
                        }
                        if (obj.type == 'all') {
                            for (i = 0; i < table_checkbox_all.length; i++) {
                                checkbox_set.add(table_checkbox_all[i].id);
                            }
                        }
                    } else {
                        if (obj.type == 'one') {
                            checkbox_set.delete(obj.data.id)
                        }
                        if (obj.type == 'all') {
                            for (i = 0; i < table_checkbox_all.length; i++) {
                                checkbox_set.delete(table_checkbox_all[i].id);
                            }
                        }
                    }
                });
            {#TODO 表格边添加#}
            table.on('toolbar(edge_tab)',
                function (obj) {
                    if (obj.event === 'create') {
                        xadmin.open('添加本体关系', '{% url 'edge_create' %}', 600, 500)
                    }else if (obj.event === 'import') {
                        document.getElementById('choose_edge').click()
                    }
                });
        });


        // 设置文件上传标志位
        function edge_file(obj) {
            console.log('触发文件上传')
            $('#edge_name').html($('#choose_file').val().split('\\').slice(-1))

            var formdata = new FormData();
            var file_obj = $('[type=file]')[1].files[0];
            formdata.append("file", file_obj);


            $.ajax({
                url: '{% url 'up_edge_file' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    console.log('success', data);
                    window.location.reload();
                },
                error: function (response) {
                    console.log('err', response);
                }
            });
        }

        function edge_search() {
            //执行重载
            layui.use(['table'], function () {
                var table = layui.table;
                // todo 表格渲染
                var edge_text = $("#edge_text").val();
                table.reload('edge_tab', {

                    where: { //设定异步数据接口的额外参数，任意设
                        edge_text: edge_text
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            })
        }

        function reload() {
            layui.use(['table'], function () {
                var table = layui.table;
                // todo 表格渲染
                table.reload('edge_tab', {
                    where: { //设定异步数据接口的额外参数，任意设
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            });
        }


        {#TODO 删除方法#}

        function edge_del(obj, edge_type, start_node, end_node) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $.getJSON('{% url 'edge_delete' %}', {
                    edge_type: edge_type,
                    start_node: start_node,
                    end_node: end_node,
                }, function (data) {
                    if (data.status == 1) {
                        layui.use(['table'], function () {
                            var table = layui.table;
                            // todo 表格渲染
                            table.reload('edge_tab', {
                                where: { //设定异步数据接口的额外参数，任意设
                                }
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            }); //只重载数据
                        });

                        layer.msg('已删除!', {icon: 1, time: 1000});
                    } else {
                        layer.msg('删除失败！', {icon: 1, time: 1000})
                    }

                })

            });
        }


    </script>

{% endblock %}



